<template>
  <Layout class="p-5 bg-white">
    <Form
      :label-width="155"
      :rules="ruleValidate"
      ref="addBaoming"
      :model="addBaoming"
    >
      <Row>
        <Col span="20" push="3">
          <FormItem class="w-50" label="姓名">
            <label>{{ this.$route.params.row.name }}</label>
          </FormItem>
          <FormItem class="w-50" label="服务项目">
            <i-col :class="'w-75 '">
              <Select
                placeholder="请选择服务项目"
                clearable
                v-model="projectServiceId"
                @on-change="selectProjectService()"
              >
                <Option v-for="item in projectServiceList" :value="item.id"
                  >{{ item.name }}
                </Option>
              </Select>
            </i-col>
          </FormItem>
          <FormItem class="w-50" label="价格">
            <label>{{ this.beforeDiscountAmount }}</label>
          </FormItem>
          <FormItem class="w-50" label="优惠" prop="payment.discount">
            <!-- <CheckboxGroup
              v-model="checkAllGroup"
              @on-change="checkAllGroupChange"
            >
              <Checkbox
                v-for="item in discountList"
                :label="item.name"
              ></Checkbox>
            </CheckboxGroup> -->
            <RadioGroup
              v-model="addBaoming.payment.discount"
              @on-change="selectdiscount()"
            >
              <Radio
                v-for="item in discountList"
                :label="item.disconut"
                :disabled="isSelectProjectService"
                >{{ item.disconut }}</Radio
              >
            </RadioGroup>
          </FormItem>
          <FormItem class="w-200" label="选择支付方式" prop="payment.pOId">
            <i-col :class="'w-75 '">
              <RadioGroup
                v-model="addBaoming.payment.pOId"
                @on-change="selectPaymentOption()"
              >
                <Radio
                  v-for="item in paymentOptionList"
                  :label="item.id"
                  :disabled="isSelectDiscount"
                  >{{ item.name }}</Radio
                >
              </RadioGroup>
            </i-col>
          </FormItem>
          <Card dis-hover>
            <span>总期数:&nbsp&nbsp&nbsp{{ paymentItem.number }}期</span><br />
            <!-- <span>月服务费率:&nbsp&nbsp&nbsp{{ paymentItem.rate * 100 }}%</span> -->
            <span>月服务费率:&nbsp&nbsp&nbsp{{ monthRate }}%</span><br />
            <span
              >服务管理费总计:&nbsp&nbsp&nbsp{{
                paymentItem.totalService
              }}元</span
            ><br />
            <span>付款明细如下表：</span>

            <Table :columns="columns1" :data="tableData"> </Table>
          </Card>
          <FormItem class="w-50" label="请求时间" prop="payment.requestDate">
            <Date-picker
              class="w-100"
              type="date"
              @on-change="requestDate"
              placeholder="请输入请求时间"
            ></Date-picker>
          </FormItem>
          <FormItem class="w-50" label="报名时间" prop="baoming.dateTime">
            <Date-picker
              class="w-100"
              type="datetime"
              @on-change="baomingDateTime"
              placeholder="请输入报名时间"
            ></Date-picker>
          </FormItem>
          <FormItem class="w-50" label="跟进人">
            <label>{{ this.$route.params.row.autor }}</label>
          </FormItem>
          <FormItem class="w-50" label="账号" prop="user.account">
            <Input
              v-model="addBaoming.user.account"
              placeholder="请设置账号"
            ></Input>
          </FormItem>
          <FormItem class="w-50" label="密码" prop="user.password">
            <Input
              v-model="addBaoming.user.password"
              placeholder="请设置密码"
            ></Input>
          </FormItem>
        </Col>
      </Row>
      <FormItem class="text-right">
        <Button v-preventReClick @click="submit" type="primary">提交</Button>
        <Button @click="cancel" class="ml-2">取消</Button>
      </FormItem>
    </Form>
    <Loadding v-bind:loadinghuan="isSpinShow"></Loadding>
  </Layout>
</template>

<script>
import { Row } from 'view-design'
export default {
  data() {
    return {
      isSpinShow: false,
      isSelectDiscount: true,
      isSelectProjectService: true,
      discount: '',
      discountList: [
        { id: 1, disconut: '0' },
        { id: 2, disconut: '200' },
        { id: 3, disconut: '300' },
        { id: 4, disconut: '500' },
        { id: 5, disconut: '1000' },
      ],
      columns1: [
        {
          title: '期数',
          key: 'number',
        },
        {
          title: '用户应付',
          key: 'payable',
        },
        {
          title: '服务管理费',
          key: 'service',
        },
        {
          title: '机构应收',
          key: 'receivables',
        },
      ],
      tableData: [],
      paymentOption: '',
      paymentOptionId: '',
      projectServiceId: '',
      searchCu: '',
      ruleValidate: {
        name: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
        tel: [
          {
            required: true,
            message: '电话号码不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
        'payment.requestDate': [
          {
            required: true,
            message: '请求时间不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
        'baoming.dateTime': [
          {
            required: true,
            message: '报名时间不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
        'user.account': [
          {
            required: true,
            message: '账号不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
        'user.password': [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
        'payment.discount': [{ required: true }],
        'payment.pOId': [{ required: true }],
      },
      allPermissions: [],
      addBaoming: {
        baoming: {
          studentId: '',
          autor: '',
          dateTime: '',
        },
        payment: {
          pOId: '',
          requestDate: '',
          contractId: '1',
          discount: '',
        },
        user: {
          account: '',
          password: '',
          openId: '',
        },
        projectService: {
          amount: '',
          id: '',
        },
        paymentOptions: {
          base: '',
          main: '',
          rate: '',
          payDate: '',
        },
      },
      User: {},
      projectServiceList: [],
      paymentOptionList: [],
      paymentItem: {},
      monthRate: '',
      beforeDiscountAmount: '',
      isFristSelectdiscount: 0,
    }
  },
  created: function() {
    this.addBaoming.baoming.autor = this.$route.params.row.autorId
    this.addBaoming.baoming.studentId = this.$route.params.row.studentId
    //在session中取出当前用户权限并校验绑定跟进人条件检索的选择框
    let currentUser = JSON.parse(sessionStorage.getItem('CURRENT_USER'))
    this.User = currentUser
    //请求服务项目列表
    this.http
      .get({
        url: '/projectService/list',
      })
      .then((data) => {
        this.$data.projectServiceList = data
      })
    //请求服务付款方式列表
    this.http
      .get({
        url: '/paymentOptions/list',
      })
      .then((data) => {
        this.$data.paymentOptionList = data
      })
  },
  destroyed: function() {
    // this.$router.push({
    //   name: 'publicSea',
    // })
  },
  methods: {
    // //   优惠复选框
    // checkAllGroupChange(data) {
    //   // if (data.length === 3) {
    //   //     this.indeterminate = false;
    //   //     this.checkAll = true;
    //   // } else if (data.length > 0) {
    //   //     this.indeterminate = true;
    //   //     this.checkAll = false;
    //   // } else {
    //   //     this.indeterminate = false;
    //   //     this.checkAll = false;
    //   // }
    // },
    requestDate(change) {
      this.addBaoming.payment.requestDate = change
    },
    baomingDateTime(change) {
      this.addBaoming.baoming.dateTime = change
    },
    //计算分期数据
    selectPaymentOption: function() {
      this.http
        .get({
          url: '/paymentItem/calculate',
          param: {
            paymentOptionsId: this.$data.addBaoming.payment.pOId,
            amount: this.beforeDiscountAmount,
          },
        })
        .then((data) => {
          this.$data.tableData = data.paymentItemList
          this.$data.paymentItem = data
          this.$data.addBaoming.paymentOptions = data.paymentOptions
          this.monthRate = (this.$data.paymentItem.rate * 100).toFixed(2)
        })
    },
    //查询服务项目数据
    selectProjectService: function() {
      if (this.projectServiceId != null) {
        this.http
          .get({
            url: `/projectService/info/${this.$data.projectServiceId}`,
          })
          .then((data) => {
            this.$data.addBaoming.projectService = data
            this.beforeDiscountAmount = data.amount
          })
        this.isSelectProjectService = false
      }
    },
    //计算优惠后价格
    selectdiscount: function() {
      let num =
        Number(this.$data.addBaoming.projectService.amount) -
        Number(this.$data.addBaoming.payment.discount)

      this.beforeDiscountAmount = num
      this.isSelectDiscount = false
      if (
        this.isFristSelectdiscount == 1 &&
        this.$data.addBaoming.payment.pOId != ''
      ) {
        this.selectPaymentOption()
      }
      this.isFristSelectdiscount = 1
    },
    submit: function() {
      if (this.$data.addBaoming.payment.discount.length === 0) {
        this.message.error('优惠必须选择')
        return
      }
      if (this.$data.addBaoming.payment.pOId.length === 0) {
        this.message.error('支付方式必须选择')
        return
      }
      if (this.$data.addBaoming.payment.requestDate.trim().length === 0) {
        this.message.error('请求时间必须输入')
        return
      }
      if (this.$data.addBaoming.baoming.dateTime.trim().length === 0) {
        this.message.error('报名时间必须输入')
        return
      }
      if (this.$data.addBaoming.user.account.trim().length === 0) {
        this.message.error('账号必须输入')
        return
      }
      if (this.$data.addBaoming.user.account.indexOf(' ') > -1) {
        this.message.error('账号中不能有空格')
        return
      }
      if (this.$data.addBaoming.user.password.trim().length === 0) {
        this.message.error('密码必须输入')
        return
      }
      if (this.$data.addBaoming.user.password.indexOf(' ') > -1) {
        this.message.error('密码中不能有空格')
        return
      }
      let self = this
      this.isSpinShow = true
      this.http
        .post({
          url: '/baoming',
          param: { baomingStr: self.$data.addBaoming },
        })
        .then((data) => {
          this.isSpinShow = false
          self.message.info('新增成功')
          this.$tabs.close({ to: '/baoming' })
        })
    },
    cancel: function() {
      this.$tabs.close({ to: '/baoming' })
    },
  },
}
</script>

<style></style>
